<template>
  <a-drawer title="预警配置" :visible="visible" :width="900" placement="left" @close="handleClose" :closable="true"
    :mask-closable="false">
    <div class="configure-content">
      <!-- 模型选择 -->
      <div class="section">
        <h3 class="section-title">模型选择</h3>
        <div class="form-row">
          <div class="form-item">
            <label class="form-label">模型类型</label>
            <a-select v-model="formData.modelUuid" placeholder="请选择模型类型" style="width: 200px"
              @click="onModelSelectClick" @change="onModelChange">
              <a-select-option v-for="model in modelList" :key="model.uuid" :value="model.uuid">
                {{ model.name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="form-item">
            <label class="form-label">模型版本</label>
            <a-select v-model="formData.modelVersion" placeholder="请选择模型版本" style="width: 200px">
              <a-select-option v-for="version in versionList" :key="version.id" :value="version.version">
                {{ version.version }}
              </a-select-option>
            </a-select>
          </div>
          <div class="form-item">
            <label class="form-label">email通知</label>
            <a-input v-model="formData.email" placeholder="请输入邮箱地址" style="width: 200px" />
          </div>
        </div>
      </div>

      <!-- 预警条件设置 -->
      <div class="section">
        <h3 class="section-title">预警条件设置</h3>
        <div class="condition-item">
          <div class="condition-row">
            <a-select v-model="formData.condition.field" mode="multiple" placeholder="选择指标" style="width: 200px"
              @change="handleFieldChange">
              <a-select-option v-for="option in fieldOptions" :key="option.value" :value="option.value"
                :disabled="option.disabled">
                {{ option.label }}
              </a-select-option>
            </a-select>
            <!-- 选择变量输入框 - 仅在选择PSI类指标时显示 -->
            <a-popover v-if="showVariableInput" v-model="variablePopoverVisible" title="变量选择" trigger="hover"
              placement="bottom" overlayClassName="variable-popover">
              <template slot="content">
                <div class="variable-transfer-container">
                  <a-transfer v-model="selectedVariables" :data-source="variableDataSource" :titles="['可选变量', '已选变量']"
                    :target-keys="targetKeys" :selected-keys="selectedKeys" :render="item => item.title" :list-style="{
                      width: '200px',
                      height: '300px',
                    }" @change="handleVariableChange" @selectChange="handleVariableSelectChange">
                    <template slot="children" slot-scope="{
                        props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
                        on: { itemSelectAll, itemSelect },
                      }">
                      <a-table :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
                        " :columns="direction === 'left' ? leftColumns : rightColumns" :data-source="filteredItems"
                        size="small" :style="{ pointerEvents: listDisabled ? 'none' : null }" :custom-row="({ key, disabled: itemDisabled }) => ({
                          on: {
                            click: () => {
                              if (itemDisabled || listDisabled) return;
                              itemSelect(key, !selectedKeys.includes(key));
                            },
                          },
                        })
                          " />
                    </template>
                  </a-transfer>
                </div>
              </template>
              <a-input v-model="formData.condition.variables" placeholder="选择变量" readonly
                style="width: 200px; margin-left: 8px" />
            </a-popover>
            <a-select v-model="formData.condition.operator" placeholder="选择条件" style="width: 120px; margin: 0 8px">
              <a-select-option v-for="option in operatorOptions" :key="option.value" :value="option.value">
                {{ option.label }}
              </a-select-option>
            </a-select>
            <a-input v-model="formData.condition.value" placeholder="输入值" style="width: 100px; margin-right: 8px" />
            <a-button type="primary" size="small" @click="addCondition">
              添加
            </a-button>
          </div>
        </div>

        <!-- 已添加的条件列表 -->
        <div class="condition-list" v-if="conditionList.length > 0">
          <div v-for="(item, index) in conditionList" :key="index" class="condition-item-row">
            <div class="condition-content">
              <span class="condition-radio">●</span>
              <div class="condition-fields">
                <span v-if="item.fields && item.fields.length > 1" class="condition-text-multiple">
                  {{ item.fields.length }}个指标
                  <a-popover placement="bottom" trigger="hover">
                    <template slot="content">
                      <div class="fields-popover-content">
                        <div v-for="field in item.fields" :key="field.value" class="field-item">
                          {{ field.label }}
                        </div>
                      </div>
                    </template>
                    <a-icon type="info-circle" class="info-icon" />
                  </a-popover>
                </span>
                <span v-else class="condition-text">{{ item.fieldLabel || item.field }}</span>
              </div>
              <!-- PSI类指标显示变量选择 -->
              <div v-if="item.isPsiCategory && item.selectedVariables && item.selectedVariables.length > 0"
                class="condition-variables">
                <a-popover placement="bottom" trigger="hover" overlayClassName="variable-display-popover">
                  <template slot="content">
                    <div class="variable-display-container">
                      <div class="variable-display-title">已选择的变量</div>
                      <a-transfer :data-source="getVariableDisplayData(item.selectedVariables)" :titles="['', '已选变量']"
                        :target-keys="item.selectedVariables.map(v => v.key)" :render="item => item.title"
                        :disabled="true" :list-style="{
                          width: '180px',
                          height: '200px',
                        }">
                        <template slot="children" slot-scope="{
                            props: { direction, filteredItems },
                          }">
                          <div v-if="direction === 'right'">
                            <div class="variable-display-list">
                              <div v-for="variable in filteredItems" :key="variable.key" class="variable-display-item">
                                {{ variable.title }}
                              </div>
                            </div>
                          </div>
                        </template>
                      </a-transfer>
                    </div>
                  </template>
                  <span class="condition-select">
                    已选择{{ item.selectedVariables.length }}个变量
                    <a-icon type="eye" class="view-icon" />
                  </span>
                </a-popover>
              </div>
              <span class="condition-operator">{{ item.operator }}</span>
              <span class="condition-value">{{ item.value }}</span>
            </div>
            <a-button type="link" size="small" @click="removeCondition(index)" class="delete-btn">
              删除
            </a-button>
          </div>
        </div>
      </div>

      <!-- 开关控制 -->
      <div class="section">
        <h3 class="section-title">开关控制</h3>
        <div class="switch-item">
          <label class="switch-label">预警生效开关：</label>
          <a-switch v-model="formData.enabled" checked-children="开" un-checked-children="关" />
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="drawer-footer">
      <a-button @click="handleClose" style="margin-right: 8px">
        取消
      </a-button>
      <a-button type="primary" @click="handleConfirm" :loading="loading">
        确定
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { alertConfigField, allModel, alertConfig, alertConfigPut } from '@/api/warningEvent'

export default {
  name: 'ConfigureDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      previousModelUuid: '', // 保存之前选择的模型UUID
      isInitializing: false, // 标记是否正在初始化
      formData: {
        modelUuid: '',
        modelVersion: '',
        email: '',
        condition: {
          field: [],
          operator: undefined,
          value: '',
          variables: ''
        },
        enabled: true
      },
      modelList: [],
      versionList: [],
      conditionList: [],
      // 变量选择相关数据
      variablePopoverVisible: false,
      selectedVariables: [],
      targetKeys: [],
      selectedKeys: [],
      variableDataSource: [],
      leftColumns: [
        {
          dataIndex: 'title',
          title: '变量名',
        },
      ],
      rightColumns: [
        {
          dataIndex: 'title',
          title: '变量名',
        },
      ],
      // 指标分类定义
      fieldCategories: {
        psi: ['compareB', 'compareD', 'compareW', 'compareM'],
        call: ['modelCallD', 'modelCallH'],
        model: ['AUC', 'KS']
      },
      // 指标选项
      fieldOptions: [
        { value: 'compareB', label: 'PSI跟建模对比', category: 'psi', disabled: false },
        { value: 'compareD', label: 'PSI跟昨天对比', category: 'psi', disabled: false },
        { value: 'compareW', label: 'PSI跟上周对比', category: 'psi', disabled: false },
        { value: 'compareM', label: 'PSI跟上月对比', category: 'psi', disabled: false },
        { value: 'modelCallD', label: '调用量天对比', category: 'call', disabled: false },
        { value: 'modelCallH', label: '调用量小时对比', category: 'call', disabled: false },
        { value: 'AUC', label: 'AUC', category: 'model', disabled: false },
        { value: 'KS', label: 'KS', category: 'model', disabled: false }
      ],
      // 操作符选项
      operatorOptions: [
        { value: '>', label: '大于' },
        { value: '<', label: '小于' },
        { value: '=', label: '等于' },
        { value: '>=', label: '大于等于' },
        { value: '<=', label: '小于等于' }
      ]
    }
  },
  computed: {
    // 判断是否显示变量选择输入框
    showVariableInput() {
      if (!this.formData.condition.field || this.formData.condition.field.length === 0) {
        return false
      }
      // 检查选中的指标是否包含PSI类指标
      return this.formData.condition.field.some(fieldValue => {
        const option = this.fieldOptions.find(opt => opt.value === fieldValue)
        return option && option.category === 'psi'
      })
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.initFormData()
      }
    },
    // 监听模型类型和版本变化，重新获取变量数据
    'formData.modelUuid'(newVal, oldVal) {
      // 避免初始化时重复调用
      if (!this.isInitializing && oldVal !== undefined && newVal !== oldVal) {
        this.loadVariableData()
      }
    },
    'formData.modelVersion'(newVal, oldVal) {
      // 避免初始化时重复调用
      if (!this.isInitializing && oldVal !== undefined && newVal !== oldVal) {
        this.loadVariableData()
      }
    }
  },
  methods: {
    initFormData() {
      this.isInitializing = true
      // 重置previousModelUuid，确保第一次选择时的正确判断
      this.previousModelUuid = ''
      // 加载模型列表
      this.loadModelList()
      // 根据传入的record初始化表单数据
      if (this.record && Object.keys(this.record).length > 0) {
        this.formData.modelUuid = this.record.modelUuid || this.record.uuid || ''
        this.formData.modelVersion = this.record.version || ''
        this.formData.enabled = true
        // 初始化时设置previousModelUuid为当前值
        this.previousModelUuid = this.formData.modelUuid
        // 更新版本列表
        this.updateVersionList()
        // 加载预警配置数据
        this.loadAlertConfig()
        // 初始化时加载变量数据（只在有模型数据时调用）
        if (this.formData.modelUuid && this.formData.modelVersion) {
          this.loadVariableData()
        }
      }
      this.$nextTick(() => {
        this.isInitializing = false
      })
    },
    // 加载模型列表
    loadModelList() {
      allModel({ monitor: 1 })
        .then((res) => {
          if (res.code === 200 && res.data) {
            this.modelList = res.data
            // 如果已选择模型类型，更新版本列表
            this.updateVersionList()
          }
        })
        .catch((error) => {
          console.error('获取模型列表失败:', error)
        })
    },
    // 模型选择点击时的处理
    onModelSelectClick() {
      // 记录当前选择的值，用于取消时恢复
      this.previousModelUuid = this.formData.modelUuid
    },

    // 模型类型改变时的处理
    onModelChange(value) {
      // 如果值没有变化，直接执行
      if (value === this.previousModelUuid) {
        return
      }

      // 如果是第一次选择（previousModelUuid为空），直接执行
      if (!this.previousModelUuid) {
        this.previousModelUuid = value
        this.handleModelChangeConfirm(value)
        return
      }

      // 获取即将选中的模型名称
      const selectedModel = this.modelList.find(model => model.uuid === value)
      const modelName = selectedModel ? selectedModel.name : '模型'

      // 弹窗确认
      this.$confirm({
        title: '确认更改',
        content: `更改"${modelName}"将丢失当前预警配置，确认更改吗？`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          // 确认后执行模型切换逻辑
          this.previousModelUuid = value
          this.handleModelChangeConfirm(value)
        },
        onCancel: () => {
          // 取消时恢复原来的选择
          this.$nextTick(() => {
            this.formData.modelUuid = this.previousModelUuid
          })
        }
      })
    },

    // 确认更改模型后的处理
    async handleModelChangeConfirm(value) {
      // 模型类型改变时，清空版本选择并更新版本列表
      this.formData.modelVersion = ''
      this.conditionList = [] // 清空当前预警配置
      this.updateVersionList()

      // 等待版本列表更新完成后，刷新数据
      this.$nextTick(async () => {
        if (this.formData.modelVersion) {
          try {
            // 调用alertConfigField刷新字段数据
            await this.loadVariableData()
            // 调用alertConfig刷新配置数据
            await this.loadAlertConfig()
          } catch (error) {
            console.error('刷新数据失败:', error)
            this.$message.error('刷新数据失败')
          }
        }
      })
    },
    // 更新版本列表
    updateVersionList() {
      // 根据选择的模型类型更新版本列表
      if (this.formData.modelUuid) {
        const selectedModel = this.modelList.find(model => model.uuid === this.formData.modelUuid)
        if (selectedModel && selectedModel.version) {
          // 解析版本字符串，支持单个版本(V1)或多个版本(V1,V2)格式
          const versions = selectedModel.version.split(',').map(v => v.trim())
          this.versionList = versions.map((version, index) => ({
            id: `${selectedModel.id}_${index}`,
            version: version,
            name: version
          }))
          // 自动选中第一条版本数据
          if (this.versionList.length > 0 && !this.formData.modelVersion) {
            this.formData.modelVersion = this.versionList[0].version
          }
        } else {
          this.versionList = []
        }
      } else {
        // 如果没有选择模型类型，版本列表为空
        this.versionList = []
      }
    },
    // 加载预警配置数据
    async loadAlertConfig() {
      if (!this.formData.modelUuid || !this.formData.modelVersion) {
        return
      }

      try {
        const response = await alertConfig({
          modelUuid: this.formData.modelUuid,
          version: this.formData.modelVersion
        })

        if (response.success && response.data) {
          const { alertRuleDetails, status, email } = response.data

          // 设置开关状态
          this.formData.enabled = status === 1

          // 回显邮箱信息
          this.formData.email = email || ''

          // 处理预警规则详情
          if (alertRuleDetails) {
            this.parseAlertRuleDetails(alertRuleDetails)
          }
        }
      } catch (error) {
        console.error('加载预警配置失败:', error)
        this.$message.error('获取预警配置异常')
      }
    },
    // 解析预警规则详情
    parseAlertRuleDetails(alertRuleDetailsStr) {
      try {
        const alertRules = JSON.parse(alertRuleDetailsStr)
        this.conditionList = []

        alertRules.forEach(rule => {
          const { type, fields, rule: ruleConfig } = rule
          const { compareKey, compareValue } = ruleConfig

          // 获取指标信息
          const selectedFields = type.map(fieldValue => {
            const fieldOption = this.fieldOptions.find(option => option.value === fieldValue)
            return {
              value: fieldValue,
              label: fieldOption ? fieldOption.label : fieldValue,
              category: fieldOption ? fieldOption.category : 'unknown'
            }
          })

          // 检查是否为PSI类指标
          const isPsiCategory = selectedFields.some(f => f.category === 'psi')

          // 处理变量信息（仅PSI类指标有变量）
          let selectedVariables = []
          if (isPsiCategory && fields && fields.length > 0) {
            selectedVariables = fields.map(field => ({
              key: field,
              title: field,
              description: field
            }))
          }

          // 创建条件项
          const conditionItem = {
            fields: selectedFields,
            field: selectedFields.length === 1 ? selectedFields[0].value : type.join(', '),
            fieldLabel: selectedFields.length === 1 ? selectedFields[0].label : `${selectedFields.length}个指标`,
            operator: compareKey,
            value: compareValue,
            isPsiCategory,
            selectedVariables
          }

          this.conditionList.push(conditionItem)
        })
      } catch (error) {
        console.error('解析预警规则详情失败:', error)
        this.$message.error('预警规则数据格式错误')
      }
    },
    // 加载变量数据
    async loadVariableData() {
      if (!this.formData.modelUuid || !this.formData.modelVersion) {
        this.variableDataSource = []
        return
      }

      try {
        const response = await alertConfigField({
          modelUuid: this.formData.modelUuid,
          version: this.formData.modelVersion
        })

        if (response.success && response.data) {
          // 将API返回的变量名转换为穿梭框需要的数据格式
          this.variableDataSource = response.data.map(variableName => ({
            key: variableName,
            title: variableName,
            description: variableName
          }))
        } else {
          this.variableDataSource = []
          // this.$message.warning('获取变量数据失败')
        }
      } catch (error) {
        console.error('加载变量数据失败:', error)
        this.variableDataSource = []
        this.$message.error('获取变量数据异常')
      }
    },
    // 处理指标选择变化
    handleFieldChange(selectedFields) {
      if (selectedFields.length === 0) {
        // 如果没有选择任何项，重置所有选项为可用
        this.fieldOptions.forEach(option => {
          option.disabled = false
        })
        return
      }

      // 获取当前选择的第一个项目的分类
      const firstSelectedOption = this.fieldOptions.find(option => option.value === selectedFields[0])
      const selectedCategory = firstSelectedOption.category

      // 更新选项的禁用状态
      this.fieldOptions.forEach(option => {
        if (option.category !== selectedCategory) {
          option.disabled = true
        } else {
          option.disabled = false
        }
      })
    },
    addCondition() {
      const { field, operator, value, variables } = this.formData.condition
      if (field.length > 0 && operator && value) {
        // 获取选中的指标信息
        const selectedFields = field.map(fieldValue => {
          const fieldOption = this.fieldOptions.find(option => option.value === fieldValue)
          return {
            value: fieldValue,
            label: fieldOption.label,
            category: fieldOption.category
          }
        })

        // 检查是否包含PSI类指标
        const isPsiCategory = selectedFields.some(f => f.category === 'psi')

        // 获取选中的变量信息（仅PSI类指标需要）
        let selectedVariables = []
        if (isPsiCategory && this.targetKeys.length > 0) {
          selectedVariables = this.variableDataSource.filter(item =>
            this.targetKeys.includes(item.key)
          )
        }

        // 创建条件项
        const conditionItem = {
          fields: selectedFields,
          field: selectedFields.length === 1 ? selectedFields[0].value : field.join(', '),
          fieldLabel: selectedFields.length === 1 ? selectedFields[0].label : `${selectedFields.length}个指标`,
          operator,
          value,
          isPsiCategory,
          selectedVariables
        }

        this.conditionList.push(conditionItem)

        // 清空输入
        this.formData.condition = {
          field: [],
          operator: undefined,
          value: '',
          variables: ''
        }

        // 重置变量选择状态
        this.targetKeys = []
        this.selectedKeys = []
        this.selectedVariables = []

        // 重置选项状态
        this.fieldOptions.forEach(option => {
          option.disabled = false
        })
      } else {
        this.$message.warning('请完整填写预警条件')
      }
    },
    removeCondition(index) {
      this.conditionList.splice(index, 1)
    },
    handleClose() {
      this.$emit('close')
      this.resetForm()
    },
    async handleConfirm() {
      // 验证表单
      if (!this.formData.modelUuid) {
        this.$message.warning('请选择模型类型')
        return
      }
      if (!this.formData.modelVersion) {
        this.$message.warning('请选择模型版本')
        return
      }
      if (this.conditionList.length === 0) {
        this.$message.warning('请至少添加一个预警条件')
        return
      }

      this.loading = true

      try {
        // 构建预警规则详情数据
        const alertRuleDetails = this.conditionList.map(condition => {
          const ruleItem = {
            type: condition.fields.map(field => field.value),
            rule: {
              compareKey: condition.operator,
              compareValue: condition.value
            }
          }

          // 如果是PSI类指标且有选择变量，添加fields字段
          if (condition.isPsiCategory && condition.selectedVariables && condition.selectedVariables.length > 0) {
            ruleItem.fields = condition.selectedVariables.map(variable => variable.key)
          } else {
            ruleItem.fields = null
          }

          return ruleItem
        })

        // 调用保存接口
        const response = await alertConfigPut({
          alertRuleDetails: JSON.stringify(alertRuleDetails),
          dingTalk: '', // 默认传空
          email: this.formData.email || '', // 传递用户输入的邮箱
          mobile: '', // 默认传空
          status: this.formData.enabled ? 1 : 0, // 预警生效开关1开启0关闭
          version: this.formData.modelVersion,
          modelUuid: this.formData.modelUuid
        })

        if (response.success || response.code === 200) {
          this.$message.success('预警配置保存成功')
          this.$emit('confirm', {
            ...this.formData,
            conditions: this.conditionList
          })
          this.handleClose()
        } else {
          this.$message.error(response.message || '保存失败')
        }
      } catch (error) {
        console.error('保存预警配置失败:', error)
        this.$message.error('保存预警配置异常')
      } finally {
        this.loading = false
      }
    },
    // 处理变量穿梭框变化
    handleVariableChange(targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
      // 更新输入框显示的变量
      const selectedVariableNames = this.variableDataSource
        .filter(item => targetKeys.includes(item.key))
        .map(item => item.title)
        .join(', ')
      this.formData.condition.variables = selectedVariableNames
    },
    // 处理变量选择变化
    handleVariableSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]
    },
    // 获取行选择配置
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: item => ({ disabled: disabled || item.disabled }),
        onSelectAll(selected, selectedRows, changeRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key)
          const diffKeys = changeRows.map(({ key }) => key)
          itemSelectAll(treeSelectedKeys, selected, diffKeys)
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys,
      }
    },
    // 获取变量显示数据
    getVariableDisplayData(selectedVariables) {
      return selectedVariables.map(variable => ({
        key: variable.key,
        title: variable.title,
        description: variable.description
      }))
    },
    resetForm() {
      this.formData = {
        modelUuid: '',
        modelVersion: '',
        condition: {
          field: [],
          operator: undefined,
          value: '',
          variables: ''
        },
        enabled: true
      }
      this.conditionList = []
      // 重置变量选择状态
      this.variablePopoverVisible = false
      this.selectedVariables = []
      this.targetKeys = []
      this.selectedKeys = []
      // 重置选项状态
      this.fieldOptions.forEach(option => {
        option.disabled = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.configure-content {
  padding: 0 0 60px 0;

  .section {
    margin-bottom: 32px;

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e8e8e8;
    }

    .form-row {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;

      .form-item {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .form-label {
          font-size: 14px;
          color: #666;
          font-weight: 500;
        }
      }
    }

    .condition-item {
      .condition-row {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
      }
    }

    .condition-list {
      margin-top: 16px;

      .condition-item-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: #f8f9fa;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        margin-bottom: 8px;

        .condition-content {
          display: flex;
          align-items: center;
          gap: 12px;
          flex: 1;

          .condition-radio {
            color: #1890ff;
            font-size: 12px;
          }

          .condition-fields {
            display: flex;
            align-items: center;
            gap: 4px;

            .condition-text {
              font-weight: 500;
              color: #333;
            }

            .condition-text-multiple {
              font-weight: 500;
              color: #333;
              display: flex;
              align-items: center;
              gap: 4px;

              .info-icon {
                color: #1890ff;
                cursor: pointer;
                font-size: 12px;

                &:hover {
                  color: #40a9ff;
                }
              }
            }
          }

          .condition-variables {
            .condition-select {
              color: #666;
              font-size: 12px;
              background: #e6f7ff;
              padding: 2px 8px;
              border-radius: 4px;
              cursor: pointer;
              display: flex;
              align-items: center;
              gap: 4px;

              .view-icon {
                font-size: 12px;
              }

              &:hover {
                background: #bae7ff;
              }
            }
          }

          .condition-operator {
            color: #333;
            font-weight: 500;
          }

          .condition-value {
            color: #333;
            font-weight: 500;
          }
        }

        .delete-btn {
          color: #1890ff;
          padding: 0;

          &:hover {
            color: #40a9ff;
          }
        }
      }
    }

    .switch-item {
      display: flex;
      align-items: center;
      gap: 12px;

      .switch-label {
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }
    }
  }
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  text-align: right;
}

:deep(.ant-drawer-body) {
  padding: 24px;
}

:deep(.ant-drawer-header) {
  border-bottom: 1px solid #e8e8e8;
}

// 字段信息弹窗样式
.fields-popover-content {
  max-width: 200px;

  .field-item {
    padding: 4px 0;
    color: #333;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }
}

// 变量显示弹窗样式
:deep(.variable-display-popover) {
  .ant-popover-content {
    padding: 0;
  }

  .ant-popover-inner {
    padding: 12px;
  }

  .ant-popover-title {
    padding: 8px 12px;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 600;
  }
}

.variable-display-container {
  width: 300px;

  .variable-display-title {
    font-weight: 500;
    margin-bottom: 12px;
    color: #333;
    font-size: 14px;
  }

  // 只读模式的穿梭框样式
  :deep(.ant-transfer) {
    .ant-transfer-list {
      width: 280px;
      height: 200px;
      border: 1px solid #d9d9d9;
      border-radius: 6px;

      &:first-child {
        display: none; // 隐藏左侧面板
      }

      .ant-transfer-list-header {
        background: #fafafa;
        padding: 8px 12px;
        border-bottom: 1px solid #e8e8e8;

        .ant-transfer-list-header-title {
          font-weight: 500;
          font-size: 13px;
        }
      }

      .ant-transfer-list-body {
        padding: 8px;

        .ant-transfer-list-content {
          height: 140px;
          overflow-y: auto;
        }
      }
    }

    .ant-transfer-operation {
      display: none; // 隐藏操作按钮
    }
  }

  .variable-display-list {
    max-height: 150px;
    overflow-y: auto;

    .variable-display-item {
      padding: 6px 12px;
      background: #f8f9fa;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      margin-bottom: 6px;
      font-size: 13px;
      color: #333;
      line-height: 1.4;

      &:last-child {
        margin-bottom: 0;
      }

      &:hover {
        background: #e6f7ff;
      }
    }
  }
}

// 变量选择弹窗样式
:deep(.variable-popover) {
  .ant-popover-content {
    padding: 0;
  }

  .ant-popover-inner {
    padding: 12px;
  }

  .ant-popover-title {
    padding: 8px 12px;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 600;
  }

  // 变量名省略号样式
  .ant-table-tbody {
    td {
      max-width: 180px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      padding: 4px 8px !important;
    }
  }

  .ant-transfer-list-content {
    .ant-table-cell {
      max-width: 180px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
  }
}

.variable-transfer-container {
  width: 500px;

  :deep(.ant-transfer) {
    .ant-transfer-list {
      width: 200px;
      height: 300px;

      .ant-transfer-list-header {
        background: #fafafa;
        padding: 8px 12px;

        .ant-transfer-list-header-title {
          font-weight: 500;
        }
      }

      .ant-transfer-list-body {
        .ant-transfer-list-content {
          height: 250px;
        }

        .ant-table-tbody {
          .ant-table-row {
            cursor: pointer;

            &:hover {
              background-color: #e6f7ff;
            }

            &.ant-table-row-selected {
              background-color: #bae7ff;
            }

            .ant-table-cell {
              max-width: 180px !important;
              overflow: hidden !important;
              text-overflow: ellipsis !important;
              white-space: nowrap !important;
              word-break: break-all;
            }
          }
        }

        // 针对表格内容的额外样式
        .ant-table {
          .ant-table-tbody {
            td {
              max-width: 180px !important;
              overflow: hidden !important;
              text-overflow: ellipsis !important;
              white-space: nowrap !important;
            }
          }
        }
      }

      .ant-transfer-list-search {
        padding: 8px;

        .ant-input {
          border-radius: 4px;
        }
      }
    }

    .ant-transfer-operation {
      margin: 0 8px;

      .ant-btn {
        display: block;
        margin-bottom: 4px;
      }
    }
  }
}
</style>
